<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>评论管理</span>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="文章id:">
        <el-input placeholder="输入文章id..." v-model="articleid"/>
      </el-form-item>

      <el-form-item label="用户id:">
        <el-input placeholder="输入用户id" v-model="userid"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getCommentList">搜索</el-button>
        <el-button @click="articleid = null; userid = null;">重置</el-button>
      </el-form-item>
    </el-form>

<!--    数据展示-->
    <el-table stripe max-height="900" :data="commentlist"
              v-loading="loading"
              element-loading-text="Loading..."
              :element-loading-spinner="svg"
              element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-table-column label="id" prop="id"/>
      <el-table-column label="文章id" prop="articleid"/>
      <el-table-column label="文章标题" prop="title"/>
      <el-table-column label="用户id" prop="userid"/>
      <el-table-column label="发表用户" prop="nickname"/>
      <el-table-column label="内容" prop="content"/>
      <el-table-column label="发表时间" prop="createtime"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" :icon="Delete" circle @click="deleteComment(scope.$index,scope.row.id)"/>
        </template>
      </el-table-column>

    </el-table>

<!--    分页条-->
    <div style="display: flex;justify-content: center;">
      <el-pagination background layout="prev, pager, next,jumper"
                     v-model:page-size="pageSize"
                     v-model:current-page="pageNum"
                     :total="total"
                     @size-change="onSizeChange"
                     @current-change="onCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import {ref} from "vue"
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import {commentListService, deleteCommentService, deleteUserService} from "../../api/Admin.js";
import {ElMessage, ElMessageBox} from "element-plus";



const pageNum = ref(1)   //当前页
const total = ref(0)            //总条数
const pageSize = ref(10)  //每页条数

//用户搜索时输入的文章id
const articleid = ref(null)
//用户搜索时输入的用户id
const userid = ref(null)


const commentlist = ref([])

//加载数据等待遮罩
const loading = ref(true)

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  getCommentList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  getCommentList()
}

//获取评论
const getCommentList = async () => {

  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    articleid: articleid.value ? articleid.value : null,
    userid: userid.value ? userid.value : null
  }

  let result = await commentListService(params)
  commentlist.value = result.data.items;
  total.value = result.data.total;
  loading.value = false

}

//删除评论
const deleteComment = (index,id) => {

  ElMessageBox.confirm(
      '您确定要删除这个评论吗?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {

        let result = await deleteCommentService(id)

        ElMessage.success('删除成功!')
        commentlist.value.splice(index,1)
      })
      .catch(() => {
        ElMessage.warning('取消删除!')
      })

}


</script>

<style scoped>
.page-container{
  min-height: 100%;
  box-sizing: border-box;
}

</style>